<%--Created by IntelliJ IDEA.
User: DELL
Date: 2020/9/26
Time: 22:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta>
    <title>用户信息修改</title>
    <style type="text/css" rel="stylesheet">
        body{
            width: 1010px;
        }
        .content{
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;
            border: 2px solid #0192e8;
            text-align: center;
        }
        .content table{
            margin: 0 auto;
        }
        .content tr{
            height: 30px;
        }
        .content tr th{
            width: 100px;
        }
        .content tr td{
            width: 300px;
            text-align: center;
        }
        td,input{
            padding: 0;
        }
        input{
            width: 250px;
            height: 30px;
            text-align: center;
            font-size: 16px;
            letter-spacing: 2px;
            border-radius: 20px;
            border: none;
            background: none;
        }
        select{
            width: 50px;
            height: 30px;
        }
        button{
            width: 80px;
            height: 25px;
            background: #0192e8;
            border: none;
            margin: 0 20px;
            color: white;
            font-size: 18px;
            border-radius: 10px;
            cursor: pointer;
        }
        button:hover{
            background: red;
        }
    </style>
    <script type="text/javascript" src="/WebContent/JQuery/jquery-3.4.1.js"></script>
</head>
<body>

     <form class="content" action="" onsubmit="return false">
         <table border="1" cellpadding="8">
             <input type="hidden" value="xg" name="datatype">
             <tr>
                 <th>用户名</th>
                 <td><input type="text" name="username" value="${requestScope.user.username}" id="username"></td>
             </tr>
             <tr>
                 <th>出生日期</th>
                 <td><input type="text" id="birtime" name="birtime" value="${requestScope.user.userBirthday}"></td>
             </tr>
             <tr>
                 <th>联系方式</th>
                 <td><input type="text" id="tel" name="tel" value="${requestScope.user.userTel}"></td>
             </tr>
             <tr>
                 <th>邮件地址</th>
                 <td><input type="text" id="email" name="email" value="${requestScope.user.userEmail}"></td>
             </tr>
             <tr>
                 <th>注册日期</th>
                 <td><input type="text" id="resitime" name="resitime" value="${requestScope.user.userRegisterTime}" readonly></td>
             </tr>
             <tr>
                 <td colspan="2" class="button">
                     <button id="btn11">修改</button>
                     <button type="reset">重置</button>
                 </td>
             </tr>
         </table>
         <div id="tishi" class="tishi" style="width: 420px;height: 30px;line-height: 30px;margin: 0 auto;text-align: center">

         </div>
     </form>
<script>
    $(document).ready(function () {
        var emailtest = true;
        //邮箱判断
        $("input#email").blur(function () {
            var sb = /^[0-9a-zA-Z]+@+[0-9a-zA-Z]+\.com(\.cn)?$/;
            if(sb.test($(this).val())){
                $("#tishi").html("<font style='color: green'>邮箱验证通过</font>");
                emailtest = true;
            }else{
                $("#tishi").html("<font style='color: red'>邮箱格式错误</font>");
                emailtest = false;
                return;
            }
        })



        //ajax提交修改数据
        $("#btn11").click(function () {
            //表单提交验证
            $("form.content").submit(function () {
                if(emailtest){
                    //获得数据
                    var uname = $("#username").val();
                    var birtime = $("#birtime").val();
                    var tel = $("#tel").val();
                    var email = $("#email").val();
                    var url = "username="+uname+"&birtime="+birtime+"&tel="+tel+"&email="+email;
                    //创建一个异步请求对象
                    var xmlHttp = new XMLHttpRequest();
                    //为异步请求对象绑定工作状态监听器
                    xmlHttp.onreadystatechange = function () {
                        //异步请求工作状态为4且状态码为200时
                        if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
                            var data = xmlHttp.responseText;
                            $("#tishi").html("<font style='color: green'>修改成功！</font>");
                        }
                    }
                    //初始化异步请求对象
                    xmlHttp.open("post","/DataDML?datatype=xg&"+url,true);
                    //发送请求协议包
                    xmlHttp.send();
                }else{
                    $("#tishi").html("<font style='color: red'>提交失败！请检查您的数据是否有误</font>");
                    return false;
                }
            })

        })
    })
</script>

</body>
</html>